import React from "react";
import { Table, Tag } from "antd";
import "antd/es/table/style/css";
import "antd/es/tag/style/css";

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    render: (text) => (
      <a href="https://www.douban.com" target="_blank" rel="noreferrer">
        {text}
      </a>
    ),
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "Company",
    dataIndex: "company",
    key: "company",
  },
  {
    title: "Tags",
    dataIndex: "tags",
    key: "tags",
    render: (tags) => (
      <>
        {tags.map((tag) => {
          //   let color = tag.length > 2 ? "cyan" : "green";
          return (
            <Tag color="cyan" key={tag}>
              {tag}
            </Tag>
          );
        })}
      </>
    ),
  },
];

const data = [
  {
    key: "1",
    name: "于大爷",
    age: 58,
    company: "北京德云社",
    tags: ["抽烟", "喝酒", "烫头"],
  },
  {
    key: "2",
    name: "蔡老师",
    age: 28,
    company: "不正经传媒公司",
    tags: ["唱跳", "rap", "篮球"],
  },
  {
    key: "3",
    name: "关二爷",
    age: 62,
    company: "刘氏成都分公司",
    tags: ["游泳", "宝马", "春秋"],
  },
];

export default () => <Table columns={columns} dataSource={data} />;
